<template>
    <div style="width: 80vw">
        <body class="page">
        <el-header  class="header">
            <div class="header_title" style="width: 78vw">个人信息</div>
        </el-header>
        <div class="content">
            <div class="content_title">
                <div class="title_edit">
                    <p>个人信息</p>
                    <a href="/work-dianjibianji">编辑</a>
                </div>
            </div>
            <div style="display: flex">
                <div class="content_information">
                    <div  class="information_img">
                        <el-avatar size="mini" type="primary" disabled round icon="el-icon-user-solid"></el-avatar>
                    </div>
                    <!--                    <el-button  style="justify-content:center;" size="mini">高级版/年</el-button>-->
                    <!--                    <div class="maturity">到期天数：</div>-->
                    <!--                    <div class="page_service">-->
                    <!--                        <a href="">续费</a>-->
                    <!--                        <a href="">升级</a>-->
                    <!--                    </div>-->
                </div>
                <div class="demo-type">
                    <div class="user_information">
                        <div class="name">操作员昵称</div>
                        <!--                        <div  v-for="item in user_list" :key='item.number' >-->
                        <!--                            <div class="img">-->
                        <!--                                <el-image :class="{'img': Number(item.number) === 1, 'imgs': Number(item.number) === 2}"  :src="item.path"></el-image>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                    <div class="Store_Information">
                        <div class="Store">
                            <div class="left">门店ID:<a href=""> 复制</a></div>
                            <div class="right">个人账号:00258</div>
                        </div>
                        <div class="Store">
                            <div class="left">店铺地址:123456</div>
                            <div class="right">角色:服务员</div>
                        </div>
                        <div class="Store">
                            <div class="left">员工联系地址:北京市海淀区</div>
                            <div class="right">员工姓名:米豆</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <el-table
                    :data="list"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-table
                                    :data="props.row.fileg"
                                    style="width: 100%">
                                <el-table-column
                                        prop="title"
                                        width="180">
                                </el-table-column>
                            </el-table>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name">
                </el-table-column>
            </el-table>
        </div>
        </body>
    </div>
</template>

<script>
    export default {
        name: "woker_info",
        data(){
            return{
                list:[{name:'登录日志',fileg:[{title:'login日志'}]},{name: '操作日志',fileg:[{title:'操作日志'}]}],
                user_list: [
                    {
                        path: require('/public/image/shop/v.png'),
                        number:1
                    },
                    {
                        path: require('/public/image/shop/shenfenzheng.png'),
                        number:2
                    }
                ],

            }
        },
        // 在创建之前，添加body的style属性， 给花名册组件单独设置背景色
        mounted() {
            document.querySelector("body").setAttribute('style', "background-color: WhiteSmoke;")
        },
        // 在销毁前，将body的style属性删除
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },
    }
</script>

<style scoped>
    .page{
        width: 80vw;
        height: 100%;
    }
    .header{
        width: 80vw;
        height: 5px;
        background-color: White;
        font-size: 25px;
        padding: 15px 0 10px 5px;
    }
    .content{
        margin-top: 10px;
        width: 80vw;
        height: 380px;
        background-color:White;
        border-radius:15px;

    }
    .title_edit{
        display: flex;
        padding-left: 15px;
        justify-content:space-between;
    }
    .title_edit p{
        padding-left: 15px;
    }
    .title_edit a{
        padding: 15px;
        flex-direction:row-reverse;
        color: cornflowerblue;
    }
    .content_information{
        width:8vw;
        padding: 15px;
    }
    .information_img{
        padding-left: 16px;
        margin: 5px;
        justify-content:center;
    }
    .maturity{
        justify-content:center;
        margin: 5px 0 0 20px;
        font-size: 10px;
    }
    .demo-type{
        width: 65vw;
        padding: 15px 10px 0 10px ;
        justify-content: center;

    }
    .page_service a{
        margin: 5px 0 0 15px;
        font-size: 10px;
        color: cornflowerblue;
    }
    .user_information{
        width: 60vw;
        display: flex;
    }
    .name{
        justify-content: flex-start;
    }
    .img{
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }
    .imgs{
        text-align: center;
        width: 25px;
        height: 25px;
        padding:0 5px -5px 10px;
    }
    .renzheng{
        margin-left: 15px;
        color: cornflowerblue;
    }
    .Store_Information{
        width: 70vw;
    }
    .SMS{
        font-size: 15px;
        padding-top: 15px;
    }
    .Store{
        width: 60vw;
        display: flex;
        justify-content:space-between;
        padding-top:15px;
    }
    .left {
    }
    .right{
        padding-right: 30vw;

    }
    .log_title{
        width: 78vw;
        background-color: White;
        font-size: 15px;
        padding: 15px 0 10px 15px;
        margin-top: 10px;
        border-radius:10px;
        display: flex;
        justify-content:space-between;
    }
    .shop_title{
        width: 78vw;
        background-color: White;
        font-size: 15px;
        padding: 15px 0 10px 15px;
        margin-top: 10px;
        border-radius:10px;
        display: flex;
        justify-content:space-between;
    }
    .log_img{
        width: 15px ;
        height: 15px;
        padding-right: 2vw;
    }
    .shop_img{
        width: 15px ;
        height: 15px;
        padding-right: 2vw;
    }


</style>
